import {Image, StyleSheet, View, Text, TouchableOpacity, TextInput} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { useEffect, useRef, useState } from "react";
import {useConversationStore} from "@/hooks/im/conversation";

export default function settingScreen() {

    const router = useRouter();
    const [text, setText] = useState('');

    const currentGroupInfo = useConversationStore((state) => state.currentGroupInfo);
    const sendGroupNotice = useConversationStore((state) => state.sendGroupNotice);

    useEffect(() => {
        setText(currentGroupInfo.notification)
    }, []);


    const payloadNotice = function () {
        sendGroupNotice(text);
    };



    return (
        <View style={{ height: "100%", backgroundColor: "#FFF" }}>
            <Stack.Screen
                options={{
                    title: '编辑群公告', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#FFF', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                    headerRight: () => (
                        <TouchableOpacity onPress={payloadNotice}>
                           <Text style={{ color: "#EC6138" }}>发布</Text>
                        </TouchableOpacity>
                    ),
                }}
            />
            <TextInput
                style={styles.textInp}
                multiline={true}
                numberOfLines={5}
                placeholder={'填写公告1-200字'}
                value={text}
                onChangeText={setText}
            />
            {/*<RichEditor*/}
            {/*    ref={richText}*/}
            {/*    style={styles.richEditor}*/}
            {/*    placeholder="填写公告1-200字"*/}
            {/*    initialContentHTML=""*/}
            {/*    editorInitializedCallback={() => {*/}
            {/*        console.log('Editor initialized');*/}
            {/*    }}*/}
            {/*/>*/}
        </View>

    );
}

const styles = StyleSheet.create({
    richEditor: { flex: 1 },
    textInp: {
        paddingHorizontal: 12,
        height: 200,
    },
});
